<template>
    <Modal
            class="system-account-dialog-wrap"
            :mask-closable="false"
            v-model="visible"
            width="400px"
            height="400px"
            title="账号信息"
            @on-cancel="close">

        <Form :ref="validRef" :model="formData" :label-width="80" @submit.native.prevent j-loading="account.getInfo,account.saveInfo">
	        <FormItem label="用户昵称" prop="nickname" :rules="[{required: true, message: '请输入'}, {max: 50, message: '最多输入50个字符'}]">
		        <Input v-model="formData.nickname" placeholder="请输入用户昵称"/>
	        </FormItem>

	        <FormItem label="手机号码" prop="mobile" :rules="[{required: true, message: '请输入'}, {min:11, max: 11, message: '请输入正确的手机号码'}]">
		        <Input v-model="formData.mobile" type="number" placeholder="请输入手机号码" :disabled="!!formData.id"/>
	        </FormItem>

	        <FormItem v-if="formData.id" label="登录密码" prop="password" :rules="{required: true, message: '请输入'}">
		        <Input v-model="formData.password" type="password" placeholder="请输入登录密码" disabled/>
	        </FormItem>

	        <FormItem v-else label="登录密码" prop="password" :rules="[{required: true, message: '请输入'}, {validator: handleValidatorPwd}]">
		        <Input v-model="formData.password" type="text" placeholder="请输入登录密码"/>
	        </FormItem>

            <FormItem label="绑定角色" prop="roleList" :rules="{required: true, message: '请选择'}">
                <Input readonly :value="bindRoleBtnText" class="bind-role-input" @click.native="handleBindRole"/>
            </FormItem>
        </Form>

        <template slot="footer">
            <Button class="button-wide" type="primary" @click="submitHandler" :disabled="querying || submitting">提交</Button>
        </template>

        <bind-role ref="bindRoleDialogRef" @save="handleRoleSave"/>
    </Modal>
</template>

<script>
    import JBoot from 'jboot-env';

    export default JBoot.form({
        components: {
            'bind-role': require('./bind-role').default
        },

        data() {
            return {
                moduleName: 'account',
	            autoAddLoading: false
            }
        },

        computed: {
            bindRoleBtnText ({formData}){
                const {roleList} = formData;

                return this.$isEmpty(roleList) ? '点击绑定角色' : `已绑定 ${roleList.length} 个角色`;
            }
        },

        methods: {
            handleBindRole (){
                const {roleList} = this.formData;

                this.$getRef('bindRoleDialogRef').__open({roleList});
            },

            handleRoleSave (selection){
                this.$set(this.formData, 'roleList', selection);
            }
        }
    });
</script>

<style lang="scss">
    .system-account-dialog-wrap {
        & .bind-role-input{
            & > input{
                cursor: pointer;
                color: #ed4014;
                font-weight: bold;
            }
        }
    }
</style>
